<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
<%@page import="java.sql.*"%>
<%@page import="com.otc.controller.SingleController"%>
<%@page import="com.otc.model.*"%>
<%@page import="com.otc.model.Comments"%>
<%@page import="com.otc.utility.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<head>
<meta charset="utf-8" />
<title>MOVIE</title>

<link rel="stylesheet" media="all" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%@ include file="/WEB-INF/jsp/Common/Header.jsp"%>
<script>

	var cc = ${commentCount};
	var commentMovieName = new Array();
	var commentMovieDescription = new Array();
	var commentMovieId = new Array();
	var commentUserNameEmailId = new Array();
	var commentDate	= new Array();
	
	<c:forEach var="entry" items="${commentData}">
	commentMovieName.push("${entry.getCommentName()}");
	commentMovieId.push("${entry.getCommentMovieId()}");
	commentUserNameEmailId.push("${entry.getCommentEmailId()}");
	commentMovieDescription.push("${entry.getCommentDescription()}");
	commentDate.push("${entry.getCommentDate()}");
	</c:forEach>
	
	
	

	function creatediv(id, elementId, divinnertHtml) {
		var newdiv = document.createElement('div');
		newdiv.setAttribute('id', id);
		newdiv.innerHTML = divinnertHtml;
		document.getElementById(elementId).appendChild(newdiv);
	}

	function main1(var1,var2,var3,var4) {
		var day = new Date(var4);
		var month = new Array();
		month[0] = "JAN";
		month[1] = "FEB";
		month[2] = "MAR";
		month[3] = "APR";
		month[4] = "MAY";
		month[5] = "JUN";
		month[6] = "JUL";
		month[7] = "AUG";
		month[8] = "SEP";
		month[9] = "OCT";
		month[10] = "NOV";
		month[11] = "DEC";
				
		creatediv(
				var1,
				'test1234',
				'<li class="comment even thread-even depth-1" id="li-comment-1">'
						+ ' <div id="comment-1" class="comment-body cf">'
						+ ' <img src=\'http://0.gravatar.com/avatar/4f64c9f81bb0d4ee969aaf7b4a5a6f40?s=35&amp;d=&amp;r=G\' '
						+ ' class=\'avatar avatar-35 photo\' height=\'35\' width=\'35\' />'
						+ ' <div class="comment-author vcard">'+ var2
						+ '</div>'
						+ ' <div class="comment-meta commentmetadata">'
						+ ' <span  class="comment-date">Commented On '
						+ day.getDate()
						+ ' '
						+ month[day.getMonth()]
						+ '</span>'
						+ ' </div>' + ' <div class="comment-inner">'
						+ ' <p>'
						+ var3
						+ '</p>' + ' </div>' + ' </div>'
						+ ' </li>');
	}

	$(document).ready(function() {
		for (j = 0; j < cc; j++) {
			main1(j,commentMovieName[j],commentMovieDescription[j],commentDate[j]);
		}
	});
	
	
	function replacebr(cmnt)
	{
		cmnt1 = cmnt.replace(/\n/g, "<br/>");
		return cmnt1;
	}
	
	function clearFields()
	{
		document.getElementById("author").value="";
		document.getElementById("email").value="";
		document.getElementById("comment").value="";
	}
	
	function validateEmail(email) { 
	    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	    //return re.test(email);
	    alert(re.test(email));
	} 
</script>
</head>

<body class="single">

	<!-- HEADER -->
	
	<!-- ENDS HEADER -->

	<!-- MAIN -->
	<div id="main">		
		<div class="wrapper cf">

			<!-- posts list -->
			<div id="posts-list" class="cf">

				<!-- Standard -->
				<article class="format-standard">
				<div class="feature-image">
					<img
						src="/OpinionThatCounts/resources/img/movies/hollywood/${movieimage}"
						alt="Alt text" />
				</div>
				<div class="box cf">
					<div class="entry-date">
						<div class="number">${commentMovieDay}</div>
						<div class="month">${commentMovieMonth}</div>
					</div>

					<div class="excerpt">
						<div class="post-heading">${moviename}</div>
						<div class="entry-content">
							<p>${moviedescription}</p>
						</div>
					</div>

					<div class="meta">
						<span class="user"> <a href="#">By ${getMovieUserName}, </a>
						</span> <span class="comments" id="innerCommentOfMovie">${commentCount} Comments</span> <span
							class="like-dislike">${movielike} agree,${moviedislike} disagree</span> <span
							class="ratings">Overall Rating ${movierating}/10</span>
					</div>

				</div>
				</article>
				<!-- ENDS  Standard -->

				<!-- comments list -->
				<div id="comments-wrap">
					<h4 id ="updateComment" class="heading">${commentCount} Comments</h4>
					<ol class="commentlist">
						<div id="test1234"></div>
					</ol>
				</div>
				<!-- ENDS comments list -->

<!-- TEST -->
<script>
			function doAjaxPost1() {
				
				var name = $('#author').val();
				var email = $('#email').val();
				var comment = $('#comment').val();
				var idMovie = ${movieId};
				var idUser	= ${movieuserid};
				var comCount = ${commentCount}+1;
				var today = new Date();
				var dd = today.getDate();
				var mm = today.getMonth()+1; 
				var yyyy = today.getFullYear();
				var todayDate =yyyy+"-"+mm+"-"+dd;				

				comment = replacebr(comment);
				//validateEmail(email);
				
				$.ajax({
					type : "Get",
					url : "single1.html",
					data : "name=" + name+"&email="+email+"&comment="+comment+"&idMovie="+idMovie+"&idUser="+idUser,
					success : function(response) {
						
						main1(comCount,name,comment,todayDate);
						var sig = document.getElementById('updateComment');
						sig.innerHTML = comCount+" Comments";
						
						var sig1 = document.getElementById('innerCommentOfMovie');
						sig1.innerHTML = comCount+" Comments";
						clearFields();
					},
					error : function(e) {
						alert('Error: ' + e);
					}
				});
			}
		</script>
			<div id="respond">
					<h3 id="reply-title">Leave a Reply</h3>
			
			<form  method="get" id="commentform">
						<p class="comment-notes">
							Your email address will not be published. Required fields are
							marked <span class="required">*</span>
						</p>

						<p class="comment-form-author">
							<label for="author">Name<span class="required">*</span></label> <input
								id="author" name="author" type="text" value="" size="30"
								aria-required="true">
						</p>

						<p class="comment-form-email">
							<label for="email">Email<span class="required">*</span></label> <input
								id="email" name="email" type="text" value="" size="30"
								aria-required="true">
						</p>

						<p class="comment-form-comment">
							<label for="comment">Comment</label>
							<textarea id="comment" name="comment" cols="45" rows="8"
								aria-required="true"></textarea>
						</p>

						<p class="form-submit">
							<input name="submit" type="button" id="submit" onclick="doAjaxPost1();"
								value="Post Comment"> <input type="hidden"
								name="comment_post_ID" value="34" id="comment_post_ID">
							<input type="hidden" name="comment_parent" id="comment_parent"
								value="0">
						</p>
					</form>
					</div>
<!-- END TEST -->
	</div>
			<!-- ENDS posts list -->

			<!-- sidebar -->
			<%@ include file="/WEB-INF/jsp/Common/Sidebar.jsp"%>
			<!-- ENDS sidebar -->
		</div>
		<!-- ENDS WRAPPER -->
	</div>
	<!-- ENDS MAIN -->

	<!-- FOOTER -->
	<%@ include file="/WEB-INF/jsp/Common/Footer.jsp"%>
	<!-- ENDS FOOTER -->

</body>
</html>